<template>
  <div class="container">
    <h1>测试js中的delete</h1>
    <el-button type="primary" size="default" @click="init">点击触发</el-button>
    <h1>测试css中的filter</h1>
    <img
      class="img1"
      width="500"
      src="https://best-extension.extfans.com/theme/wallpapers/f5fbd3f979d6f7d26eaf6dc52c2c114c/1fc75a60cc2712ebf55727b0e56c9c.png"
    />
    <div class="textjianbian">
      哈哈哈文字
    </div>
  </div>
</template>

<script>
console.log(yulu, 'yulu');
export default {
  name: "js_delete",
  data() {
    return {
      testArr: [
        { id: 1, name: "name1" },
        { id: 2, name: "name2" },
      ],
    };
  },
  created() {},
  methods: {
    init() {
      var arr = [
        { id: 0, name: "name0" },
        { id: 1, name: "name1" },
        { id: 2, name: "name2" },
        { id: 3, name: "name3" },
        { id: 4, name: "name4" },
        { id: 5, name: "name5" },
        { id: 6, name: "name6" },
      ];
      var targetARR = [2, 3, 4];
      // var targetARR = [
      //   { id: 2, name: "name2" },
      //   { id: 3, name: "name3" },
      //   { id: 4, name: "name4" },
      // ];

      // targetARR.forEach((_) => {
      //   var idxarr = arr.findIndex((val) => {
      //     return targetARR.includes(val.id);
      //   });
      //   arr.splice(idxarr, 1);
      // });

      arr = arr.filter((item) => {
        return !targetARR.includes(item.id);
      });
      console.log(arr, "arr");
      // 删除数组元素根据相应id列表
      // 1.循环相应id列表：肯定删除相应列表长度的次数也就循环这么多次
      // 2.findIndex 找到索引、return条件为 循环目标数组中id被包含在目标list中

      arr = arr.filter((item) => {
        return !targetARR.includes(item.id);
      });
      // 过滤
      console.log(arr, "arr");

      var obj = {
        id: 1,
        name: "name1",
      };
      delete obj.id;
      delete obj.name;
      console.log(obj, "obj");
      // 可以直接删除对象的属性及值
    },
  },
};
</script>

<style>
/* ::v-deep .container { */
.container {
 /* .container /deep/ .text { */
 /* .container ::v-deep .text { */
  /* 1.调整颜色的灰度 */
  /* filter: grayscale(.4); */

  /* 2.blue用于调整图片模糊度的。参数为大于0的数字，后接px单位。 */
  /* filter: blur(3px); */

  /* 3.sepia用于调整元素的褐色程度。参数范围为0-1。 */
  /* filter: sepia(1); */

  /* 4.saturate */
  /* 调整元素的饱和度。参数范围为0-1。 不明显 */
  /* filter: saturate(1); */

  /* 5.调整元素的透明度。参数范围为0-1，0表示完全透明，1表示完全不透明。 */
  /* opacity: .1; */
  /* filter: opacity(.1); */

  /* 6.brightness */
  /* brightness用于调整元素的亮度。范围为0-1，0表示全黑，1表示最亮。 */
  /* filter: brightness(1); */

  /* 7.contrast
调整元素的对比度。默认值为1，表示与原图一致，取值小于1时，对比度降低，取值大于1时表示对比度增大。 */
  /* filter: contrast(1); */

  /* 8.hue-rotate */
  /* 色相旋转，取值为角度值，单位为deg。 */
  /* filter: hue-rotate(360deg); */

  /* 9.invert */
  /* 将元素的颜色反转。参数范围为0-1，默认值为0 */
  /* filter: invert(1); */

  /* animation: testHue 10s infinite; */
  
  
}
.textjianbian {
  width: 200px;
  height: 100px;
  background-image: linear-gradient(130deg, rgba(34, 90, 232, 0.505), rgb(57, 214, 26));
  background-clip:text;
  color: transparent;
  font-size: 30px;
  animation: testHue 3s infinite;
}

@keyframes testHue {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
</style>
